<template>
  <el-drawer
    v-model="computedValue"
    size="20%"
    style="min-width: 300px; width: 20%"
    direction="rtl"
    :with-header="false"
  >
    <div style="width: 100%; height: 100%; overflow: hidden">
      <el-input
        ref="searchInput"
        v-model="searchValue"
        placeholder="请输入搜索内容"
        :style="{
          width: '100%',
          margin: '8px 0px',
        }"
        autofocus
        @on-clear="handleSearch({ target: { value: '' } })"
        @on-change="handleSearch"
      />

      <template v-if="!loading">
        <RecycleScroller
          v-if="visibleData.length > 0"
          :style="{
            height: 'calc(100% - 32px - 16px)',
            'scroll-behavior': 'smooth',
          }"
          key-field="uuid"
          :items="visibleData"
          :item-size="itemSize"
          :buffer="buffer"
          v-slot="{ item }"
        >
          <div class="virtual-tree__list-view">
            <el-checkbox
              v-model="item.checked"
              :indeterminate="item.indeterminate"
              @change="handleCheck(item)"
            />
            <span class="virtual-tree__title">{{ item.feature_name }}</span>
          </div>
        </RecycleScroller>
        <div v-else class="not-found">暂无数据</div>
      </template>
      <template v-else>
        <div class="loading">
          <i class="fa fa-spinner put-load-loop" style="margin-right: 4px" />
          <span>加载中</span>
        </div>
      </template>
    </div>
  </el-drawer>
</template>

<script>
import { RecycleScroller } from "vue-virtual-scroller";
import { ElInput, ElCheckbox } from "element-plus";

export default {
  components: {
    RecycleScroller,
    ElInput,
    ElCheckbox,
  },
  computed: {
    computedValue: {
      get() {
        return this.showPointList
      },
      set(newValue) {
        this.$emit('update:value', newValue)
      }
    }
  },
  props: {
    data: {
      type: Object,
      default: () => {
        return {};
      },
    },
    showPointList:{
      type: Boolean,
      default: false
    }
  },
  mounted() {
    RecycleScroller.props.itemSize.default = 1000000;
    this.initData();
  },
  data() {
    return {
      searchValue: "",
      loading: false,
      itemSize: 36,
      buffer: 100,
      dataList: [],
    };
  },
  computed: {
    visibleData() {
      return this.dataList.filter((item) => item.visible);
    },
  },
  methods: {
    handleCheck(val) {

      console.log(val)
      let obj = this.dataList.find(item => {
        return item.uuid === val.uuid
      })
      if (obj) {
        obj.checked = val.checked
      }
      console.log(this.getCheckedNodes())
      this.$emit("checked", val)
    },
    uuid() {
      function s4() {
        return Math.floor((1 + Math.random()) * 0x10000)
          .toString(16)
          .substring(1);
      }
      return (
        s4() +
        s4() +
        "-" +
        s4() +
        "-" +
        s4() +
        "-" +
        s4() +
        "-" +
        s4() +
        s4() +
        s4()
      );
    },
    initData() {
      this.searchValue = "";
      this.handleSearch({ target: { value: "" } });
      this.loading = true;
      setTimeout(() => {
        this.loading = false;
        this.dataList = this.data.map((item, index) => ({
          index,
          ...item,
          uuid: this.uuid(),
          indeterminate: false,
          checked: false,
          visible: true, // 确保初始可见
        }));
        console.log(this.dataList);
        console.log("处理后数据长度:", this.dataList.length); // 确认数据量是否正常
      }, 500);
    },
    handleSearch(e) {
      const value = e.target.value.toLowerCase();
      this.dataList.forEach((item) => {
        item.visible = item.feature_name.toLowerCase().includes(value);
      });
    },
    // 获取选中的节点
    getCheckedNodes() {
      return this.dataList.filter((i) => i.checked);
    },
  },
};
</script>

<style lang="less" scoped>
/deep/ .vue-recycle-scroller__item-wrapper {
  overflow-x: auto;
}

.virtual-tree {
  &__list-view {
    position: relative;
    margin: 0;
    display: flex;
    white-space: nowrap;
    align-items: center;
  }
  &__arrow {
    width: 18px;
    height: 100%;
    display: inline-block;
    cursor: pointer;
    text-align: center;
    i {
      transition: all 0.2s ease-in-out;
      color: #d0d2d4;
      font-size: 16px;
    }
  }
  /deep/ .put-checkbox-wrapper {
    margin: 0 4px;
  }
  &__title {
    flex: 1;
    padding: 0 4px;
    height: 100%;
    display: flex;
    align-items: center;
  }
}
</style>
